<template>
  <div class="tabbar-container">
    <div class="tabbar" id="tabbar">
      <!-- 绑定本地维护的activeColor，而非直接使用props -->
      <van-tabbar v-model="active" :active-color="activeColor">
        <van-tabbar-item
          @click="handleTabClick(0, '/')"
          :active="activeIndex === 0"
        >
          <span>首页</span>
          <template #icon="props">
            <van-icon name="wap-home-o" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item
          @click="handleTabClick(1, '/ranking')"
          :active="activeIndex === 1"
          icon="bar-chart-o"
          >排行榜</van-tabbar-item
        >
        <van-tabbar-item
          @click="handleTabClick(2, '/activity')"
          :active="activeIndex === 2"
          icon="newspaper-o"
          >活动说明</van-tabbar-item
        >
        <van-tabbar-item
          @click="handleTabClick(3, '/search')"
          :active="activeIndex === 3"
          icon="search"
          >搜索</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "TabBar",
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      icon: {
        active: "https://img01.yzcdn.cn/vant/user-active.png",
        inactive: "https://img01.yzcdn.cn/vant/user-inactive.png",
      },
      // 本地维护的激活颜色（优先从localStorage读取）
      activeColor: ""
    };
  },
  computed: {
    ...mapGetters("tabBar", ["activeIndex"]),
    active: {
      get() {
        return this.activeIndex;
      },
      set(val) {
        // 保持原有逻辑
      },
    },
  },
  methods: {
    ...mapMutations("tabBar", ["SET_ACTIVE_INDEX"]),
    handleTabClick(index, path) {
      this.SET_ACTIVE_INDEX(index);
      this.$emit("change", index);
      this.$router.push(path);
      window.scrollTo(0, 0);
    },
    // 初始化颜色（从localStorage或props读取）
    initActiveColor() {
      // 1. 先从localStorage读取
      const storedColor = localStorage.getItem("navActiveColor");
      // 2. 如果有存储值，直接使用
      if (storedColor) {
        this.activeColor = storedColor;
      } else if (this.config.navActiveColor) {
        // 3. 否则使用props传入的默认值，并同步到localStorage
        this.activeColor = this.config.navActiveColor;
        localStorage.setItem("navActiveColor", this.activeColor);
      } else {
        // 4. 最终兜底值（防止颜色丢失）
        this.activeColor = "#00c48c"; // 默认绿色
      }
    }
  },
  watch: {
    // 监听props中config的变化（如配置更新时）
    "config.navActiveColor": {
      handler(newVal) {
        if (newVal) {
          // 当配置中的颜色变化时，更新本地状态和localStorage
          this.activeColor = newVal;
          localStorage.setItem("navActiveColor", newVal);
        }
      },
      immediate: true // 初始化时立即执行一次
    }
  },
  mounted() {
    console.log("TabBar接收的完整配置：", this.config);
    // 初始化颜色（优先从localStorage读取）
    this.initActiveColor();

    // 初始化路由对应的激活索引
    const pathMap = {
      "/": 0,
      "/ranking": 1,
      "/activity": 2,
      "/search": 3,
    };
    const targetIndex = pathMap[this.$route.path] || 0;
    this.SET_ACTIVE_INDEX(targetIndex);
  }
};
</script>

<style scoped>
.tabbar-container {
  height: auto;
  width: 100%;
  position: relative;
}

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  z-index: 100;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #888888;
  font-size: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tabbar-item.active {
  color: #00c48c;
}

.tabbar-icon {
  font-size: 20px;
  margin-bottom: 4px;
}
</style>
